<template>
  <div class="personalCenter-container">
    <!-- 标题 start -->
    <el-card style="margin-bottom: 10px">
      <div
        style="display: flex;flex-direction: row;justify-content: space-between"
      >
        <div>
          <div class="verticalBar"></div>
          <span style="color: #1074fd">使用教程</span>
        </div>
        <div>
          <span style="color: #999999;font-size: 12px">数据每日00:00更新</span>
        </div>
      </div>
    </el-card>
    <div style="margin-top: 20px">
      <div :class="this.tabPosition ? 'videoItem' : 'selectItem'" @click="changeVideo">视频教程</div>
      <div :class="this.tabPosition ? 'selectItem' : 'videoItem'" @click="changeVideo">文档教程</div>
    </div>
    <el-card v-if="this.tabPosition" style="position: relative">
      <div>
        <div class="worldTit">上传文档教程</div>
        <div class="worldText">已传{{worldTotal}}个教程</div>
        <el-button class="buttonDel" size="small" @click="delStateWorld">删除</el-button>
        <div>
          <div style="display: inline-block">
            <img src="@/assets/img/oms/upload.png" class="uploadIcon"   @click="openWorld"/>
            <div class="uploadText">点击上传文档</div>
          </div>
          <div v-for="item in worldGroup" :key="item.id" class="videoGroup" >
            <div v-show="item.type === '0'" >
              <img v-if="delWorld && !item.chose" src="@/assets/img/oms/chose.png" class="choseImg" @click="changeChose(item)"/>
              <img v-if="delWorld && item.chose" src="@/assets/img/oms/xuanzhong.png" class="choseImg"/>
              <img src="@/assets/img/oms/worldBg.png" class="worldGroupItem" @click="videoGroupDownload(item)"/>
            </div>
            <div class="videoGroupTit">{{item.title}}</div>
          </div>
        </div>
      </div>
      <div>
      </div>
    </el-card>
    <el-card v-if="!this.tabPosition" style="position: relative">
      <div>
        <div class="worldTit">上传视频教程</div>
        <div class="worldText">已传{{videoTotal}}个教程</div>
        <el-button class="buttonDel" size="small" @click="delState">删除</el-button>
      </div>
      <div>
        <div style="display: inline-block">
          <img src="@/assets/img/oms/upload.png" class="uploadIcon"   @click="openVideo"/>
          <div class="uploadText">点击上传视频</div>
        </div>
        <div v-for="item in videoGroup" :key="item.id" class="videoGroup">
          <div class="videoGroupItem" v-show="item.type === '1'">
            <img v-if="delVideo && !item.chose" src="@/assets/img/oms/chose.png" class="choseImg" @click="changeChose(item)"/>
            <img v-if="delVideo && item.chose" src="@/assets/img/oms/xuanzhong.png" class="choseImg"/>
            <img src="@/assets/img/oms/uploadBig.png" class="videoGroupImg" @click="videoGroupDownload(item)"/>
            <div class="videoFoot"></div>
            <div class="videoSize" >{{item.size}}MB</div>
          </div>
          <div class="videoGroupTit">{{item.title}}</div>
        </div>
      </div>
    </el-card>
    <el-dialog title="上传文档" :visible.sync="dialogTextVisible">
      <el-form :model="form">
        <el-form-item label="文档名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="副标题" :label-width="formLabelWidth">
          <el-input v-model="form.nextTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件类型" :label-width="formLabelWidth">
          <el-select v-model="form.fileType" placeholder="请选择活动区域">
            <el-option label="培训和案例" value="0"></el-option>
            <el-option label="云手机操作" value="1"></el-option>
            <el-option label="虚拟机教程" value="2"></el-option>
            <el-option label="注册" value="3"></el-option>
            <el-option label="引流操作" value="4"></el-option>
            <el-option label="直播" value="5"></el-option>
            <el-option label="话术参考" value="6"></el-option>
            <el-option label="各社交app日活" value="7"></el-option>
            <el-option label="辅助工具资料汇总" value="8"></el-option>
            <el-option label="其他" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-radio-group v-model="form.platformType">
            <el-radio label="0">电商</el-radio>
            <el-radio label="1">计数器</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文档内容" :label-width="formLabelWidth">
          <div id="updBox" style="display: flex;">
            <el-upload
              ref="uploadForm"
              :headers="headers"
              action="http://qk-api.aike.info/qk/upload/app"
              :on-success="docUploadSuccessWorld"
              :limit="1"
              accept=".docx"
            >
              <el-input style="width: 320px; caret-color: transparent"></el-input>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTextVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitWorld">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="上传视频" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="视频名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="副标题" :label-width="formLabelWidth">
          <el-input v-model="form.nextTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件类型" :label-width="formLabelWidth">
          <el-select v-model="form.fileType" placeholder="请选择活动区域">
            <el-option label="培训和案例" value="0"></el-option>
            <el-option label="云手机操作" value="1"></el-option>
            <el-option label="虚拟机教程" value="2"></el-option>
            <el-option label="注册" value="3"></el-option>
            <el-option label="引流操作" value="4"></el-option>
            <el-option label="直播" value="5"></el-option>
            <el-option label="话术参考" value="6"></el-option>
            <el-option label="各社交app日活" value="7"></el-option>
            <el-option label="辅助工具资料汇总" value="8"></el-option>
            <el-option label="其他" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-radio-group v-model="form.platformType">
            <el-radio label="0">电商</el-radio>
            <el-radio label="1">计数器</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="视频内容" :label-width="formLabelWidth">
          <el-upload class="upload-demo"
                     action="http://qk-api.aike.info/qk/upload/app"
                     :headers="headers"
                     :show-file-list="false"
                     :before-upload="beforeAvatarUpload"
                     :on-success="docUploadSuccess"
                     v-loading.fullscreen.lock="fullscreenLoading">
            <div class="videoSuccess" v-if="videoValue.size">
              <img src="@/assets/img/oms/uploadBig.png" class="videoImg"/>
              <div class="videoFoot"></div>
              <div class="videoSize" >{{videoValue.size}}MB</div>
            </div>
            <img v-else src="@/assets/img/oms/upload.png" class="uploadIcon1"/>
<!--            <i class="el-icon-plus" v-else></i>-->
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from "@/network/api/omsApi";
    export default {
      name: "index",
      data() {
          return {
            choseList: {
              ids: []
            },
            delVideo: false,
            delWorld: false,
            worldGroup: [],
            videoGroup: [],
            videoTotal: 0,
            worldTotal: 0,
            fullscreenLoading: false,
            headers: {
              session_id: ""
            },
            videoValue: {
              size: '',
              url: '',
              type: 1
            },
            worldValue: {
              url: '',
              type: 0
            },
            tabPosition: false,
            dialogFormVisible: false,
            dialogTextVisible: false,
            form: {
              title: '',
              nextTitle: '',
              fileType: '',
              platformType: ''
            },
            userOrganCode: {
              organCode: ''
            },
            formLabelWidth: '80px',
            currentUserInfo: ''
          }
      },
      created() {
        this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
        this.userOrganCode.organCode = this.currentUserInfo.organCode
        this.headers.session_id = this.currentUserInfo.token;
        this.videoList();
      },
      methods: {
        delState() {
          if (this.delVideo) {
            console.log(this.choseList, 'acsc')
            API.delCourse({
              ...this.choseList
            }).then(res => {
              console.log(res)
              if (res.data.code === 0) {
                this.$message.success('删除成功')
                location.reload();
              } else {
                this.$message.error('删除失败')
              }
            })
          } else {
            this.delVideo = true
          }
        },
        delStateWorld() {
          if (this.delWorld) {
            API.delCourse({
              ...this.choseList
            }).then(res => {
              console.log(res)
              if (res.data.code === 0) {
                this.$message.success('删除成功')
                location.reload();
              } else {
                this.$message.error('删除失败')
              }
            })
          } else {
            this.delWorld = true
          }
        },
        videoGroupDownload (item) {
          window.open(item.url)
        },
        videoList() {
          API.videoList2({
            ...this.userOrganCode
          }).then(res => {
            if (res.data.code === 0) {
              console.log(res.data.data, 'res.data')
              res.data.data.forEach(item => {
                item.chose = false
                if (item.type === '0') {
                  this.worldGroup.push(item)
                  this.worldTotal++
                } else {
                  this.videoGroup.push(item)
                  this.videoTotal++
                }
              })
            } else {
              this.$message.warning(res.data.msg);
            }
          })
        },
        changeVideo() {
          this.tabPosition = !this.tabPosition
        },
        openVideo() {
          this.dialogFormVisible  = true
          this.form.nextTitle = ''
          this.form.title = ''
          this.videoValue.url = ''
        },
        openWorld() {
          this.dialogTextVisible  = true
          this.form.nextTitle = ''
          this.form.title = ''
          this.worldValue.url = ''
        },
        beforeAvatarUpload(file) {
          this.fullscreenLoading = true;
          this.videoValue.size = parseFloat(file.size / 1024 / 1024).toFixed(2) //获取文件大小
        },
        docUploadSuccessWorld(res) {
          if (res.code === 0) {
            this.$message.success("文档上传成功");
            this.worldValue.url = res.data;
          } else {
            this.$message.warning(res.msg);
          }
        },
        docUploadSuccess(res) {
          console.log(res.data)
          if (res.code === 0) {
            this.$message.success("上传成功");
            this.fullscreenLoading = false;
            this.videoValue.url = res.data;
          } else {
            this.$message.warning(res.msg);
          }
        },
        onSubmit() {
          if (this.form.title === '' || this.form.nextTitle === '' || this.videoValue.url === '') {
            this.$message.error('请填写完整')
            return
          }
          API.uploadVideo({
            ...this.form,
            ...this.videoValue,
            ...this.userOrganCode
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success("提交成功");
              this.fullscreenLoading = false;
              this.dialogFormVisible = false;
              location.reload();
            } else {
              this.$message.warning(res.data.msg);
            }
          })
        },
        onSubmitWorld() {
          if (this.form.title === '' || this.form.nextTitle === '' || this.worldValue.url === '') {
            this.$message.error('请填写完整')
            return
          }
          API.uploadVideo({
            ...this.form,
            ...this.worldValue,
            ...this.userOrganCode
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success("提交成功");
              this.dialogTextVisible = false;
              location.reload();
            } else {
              this.$message.warning(res.data.msg);
            }
          })
        },
        changeChose(item) {
          console.log(item, '123')
          item.chose = true
          this.choseList.ids.push(item.id)
        }
      }
    }
</script>

<style scoped>
  .choseImg {
    width: 20px;
    height: 20px;
    position: absolute;
    margin: 5px 0 0 5px;
  }
  /deep/ #updBox .el-upload-list__item-name {
    margin-top: 3px;
  }

  /deep/ #updBox .el-upload-list__item:first-child {
    margin-top: -34px;
  }

  /deep/ #updBox .el-upload-list {
    padding: 0 10px;
  }
  .videoGroup {
    display: inline-block;
    margin-top: 20px;
    margin-left: 40px;
  }
  .videoGroupTit {
    color: #666666;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 14px;
    line-height: normal;
    margin-top: 4px;
  }
  .videoGroupItem {
    border-radius: 4px;
    background: #222222;
    width: 100px;
    height: 100px;
    display: inline-block !important;
    position: relative;
  }
  .worldGroupItem {
    border-radius: 4px;
    width: 100px;
    height: 100px;
    display: inline-block !important;
  }
  .videoGroupImg {
    width: 30px;
    height: 30px;
    margin: 34px 0 0 34px;
  }
  .videoSize {
    color: white;
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    bottom: 8px;
    right: 8px;
  }
  .videoTime {
    color: white;
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    bottom: 8px;
    left: 8px;
  }
  .videoFoot {
    opacity: 0.10000000149011612;
    border-radius: 0px 0px 0px 0px;
    background: #FFFFFF;
    width: 128px;
    height: 26px;
    position: absolute;
    bottom: 0;
  }
  .videoImg {
    width: 30px;
    height: 30px;
    margin-top: 48px;
  }
  .videoSuccess {
    border-radius: 4px;
    background: #222222;
    width: 128px;
    height: 128px;
    position: relative;
  }
  .uploadIcon {
    border-radius: 4px;
    background: #F2F2F2;
    width: 100px;
    height: 100px;
    margin-top: 20px;
  }
  .uploadIcon1 {
    border-radius: 4px;
    background: #F2F2F2;
    width: 100px;
    height: 100px;
  }
  .uploadText {
    color: #666666;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 14px;
    line-height: normal;
    margin-left: 5px;
  }
  .buttonDel {
    border-radius: 4px;
    background: #FF7A00;
    color: #ffffff;
    position: absolute;
    right: 36px;
    top: 25px;
  }
  .worldTit {
    color: #1074FD;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
  }
  .worldText {
    color: #9B9B9B;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 12px;
    line-height: 12px;
    margin-top: 9px;
  }
  .verticalBar {
    width: 3px;
    height: 18px;
    background: #1074fd;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-top: 2px;
  }
  .videoItem {
    color: #464646;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    line-height: 42px;
    width: 102px;
    height: 44px;
    background: #DCDCDC;
    display: inline-block;
    text-align: center
  }
  .selectItem {
    color: #ffffff;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    line-height: 42px;
    width: 102px;
    height: 44px;
    background: #1074FD;
    display: inline-block;
    text-align: center
  }
  </style>
